import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {Modal,Table, Form, Row, Col, Input, Button} from 'antd';
import {ModalForm, ListBox} from '../../../components'
import {fetchData} from '../../../components/AjaxConsumer'
import store from '../../../stores'
import styles from './index_ad.scss'
const confirm = Modal.confirm;

const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;

export default class PrintInfoPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            data: null,
        };

        //行操作列表
        this.rowOperation = [
        ];
        //header 操作列表
        this.headerOperation = [
        ];
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    hideModal = () => {
        this.setState({
            visible: false,
        });
    };
    rowHandles = (strHandles, rowObj) => {
        //listBox组件内未做函数不存在的判断，需定义空函数
    };
    
    printHandle = (rowObj) => {
        //根据对象的Id 属性获取对象信息
        let dbOutCode = rowObj[0].data.dbOutCode;
        //查询条件整理
        const options = {
            url: '/wmsrest/product/odsprodbout/printOutList?dbOutCode='+dbOutCode,
            type: 'get',
            condition: {}
        };
        //发起请求
        fetchData(this, options, (res) => {
            //回调函数
            const pagination = { ...this.state.pagination };
            pagination.total = res.data.totalCount;
            console.log(res.data);
            this.setState({
                visible: true,
                data: res.data,
                pagination
            });
        })
    };
    handleOk = () => {
        this.hideModal();
    };

    handleCancel = () => {
        this.hideModal();
    };

    handlePrint = () => {
        $("#printImg,#backImg").css("display","none");  
        window.print();   
        $("#printImg,#backImg").css("display","");  
        // return false; 
        // let html_str = document.getElementById('startprint').innerHTML;
        // window.document.body.innerHTML = html_str; 
        // window.print(); 
        // $("#printImg,#backImg").css("display","none"); 
        // let winname = window.open('', "_blank",'');
        // let bdhtml=document.getElementById('startprint').innerHTML; 
        // winname.document.body.innerHTML=bdhtml;
        // winname.print();
        // $("#printImg,#backImg").css("display","");  
    };

    render() {
        //table列表展示列配置
        //storageKey 本地存储的key
        //showName、columnName 必有属性， columnWidth 可选，默认100, columnHidden: true 列隐藏（用于列配置显示隐藏）, foreverHidden: true 列永久隐藏
        const columns = [
            {
                title: '调拨出库单号',
                dataIndex: 'dbOutCode'
            },{
                title: '产品型号',
                dataIndex: 'materialCode'
            },{
                title: '商品型号',
                dataIndex: 'materialDesc'
            },{
                title: '单位',
                dataIndex: 'unit'
            },{
                title: '数量(大写)',
                dataIndex: 'userDefined2'
            },{
                title: '备注',
                dataIndex: 'comments'
            }
        ]
        let isHideLeft = this.props.isHideLeft;
        return(
                <Modal
                    style={{top:'20px'}}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={'100%'}
                    closable={false}
                    key={Math.random()}
                    footer={null}
                    className={styles.print_modal}
                >
                
                <div id="startprint" style={{ fontSize: 22, marginLeft: 50,color: 'black' }} className="ad" >
                    {/* startprint */}
                    <div style={{ marginTop: 5 }}>
                        <Row type="flex" justify="center" align="top">
                            <Col span={3}><DemoBox value={50}>&nbsp;</DemoBox></Col>
                            <Col span={5}><DemoBox value={200}>&nbsp;</DemoBox></Col>
                            <Col span={4}><DemoBox value={200}>&nbsp;</DemoBox></Col>
                            <Col span={4}><DemoBox value={200}>&nbsp;</DemoBox></Col>
                            <Col span={3}><DemoBox value={200}>&nbsp;</DemoBox></Col>
                            <Col span={5}><DemoBox value={1000}>{this.state.data?this.state.data[0].dbOutCode:""}</DemoBox></Col>
                        </Row>
                    </div>
                    <div style={{ marginTop: 25.5 }}>
                    <Row type="flex" justify="center" align="top">
                        <Col span={3}> </Col>
                        <Col span={5}> </Col>
                        <Col span={4}> </Col>
                        <Col span={4}> </Col>
                        <Col span={3}>&nbsp;</Col>
                        <Col span={5}><DemoBox value={80}>{this.state.data?this.state.data[0].proOutType:""}</DemoBox></Col>
                    </Row>
                    </div>
                    <div style={{ marginTop: 45.5 }}>
                    <Row type="flex" justify="start">
                        <Col span={3}> </Col>
                        <Col span={5}> <DemoBox value={80}>{this.state.data?this.state.data[0].proFactory:""}</DemoBox></Col>
                        <Col span={4}> </Col>
                        <Col span={4}> </Col>
                        <Col span={3}>&nbsp;</Col>
                        <Col span={5}><DemoBox value={80}>{this.state.data?this.state.data[0].proOutPlanTime.substring(0,10):""}</DemoBox></Col>
                    </Row>
                    </div>
                    <div style={{ marginTop: 45.5 }}>
                    <Row type="flex" justify="start">
                        <Col span={3}></Col>
                        <Col span={5}><DemoBox value={80}>{this.state.data?this.state.data[0].wdCode:""}</DemoBox></Col>
                        <Col span={3}></Col>
                        <Col span={5}><DemoBox value={80}>{this.state.data?this.state.data[0].whCode:""}</DemoBox></Col>
                        <Col span={3}>&nbsp;</Col>
                        <Col span={5}><DemoBox value={80}>{this.state.data?this.state.data[0].carCode:""}</DemoBox></Col>
                    </Row>
                    </div>
                    <div style={{ marginTop: 25.5 }}>
                    <Row type="flex" justify="start">
                        <Col span={3}></Col>
                        <Col span={5}><DemoBox value={80}>{this.state.data?this.state.data[0].toWhCode:""}</DemoBox></Col>
                        <Col span={3}></Col>
                        <Col span={5}><DemoBox value={80}>{this.state.data?this.state.data[0].userDefined3:""}</DemoBox></Col>
                        <Col span={3}>&nbsp;</Col>
                        <Col span={5}></Col>
                    </Row>
                    </div>
                    <div style={{ marginTop: 25.5 }}>
                    <Row type="flex" justify="start">
                        <Col span={3}>&nbsp;</Col>
                        <Col span={21}><DemoBox value={80}>{this.state.data?this.state.data[0].applyReason:""}</DemoBox></Col>
                    </Row>
                    </div>
                    <Table 
                        className={styles.noborer_table}
                        rowKey={record => record.proDbOutId}
                        columns={columns}
                        dataSource={this.state.data}
                        bordered={false}
                        >
                    </Table>
                    <div style={{ marginTop: 25.5 }}>
                        <Row type="flex" justify="start">
                            <Col span={3}></Col>
                            <Col span={5}></Col>
                            <Col span={4}></Col>
                            <Col span={4}></Col>
                            <Col span={3}>&nbsp;</Col>
                            <Col span={5}><Button key="submit" type='primary' id='printImg' size="large" onClick={this.handlePrint}>打印</Button>&nbsp;
                            <Button key="back" type='primary' id='backImg' size="large" onClick={this.handleCancel}>返回</Button></Col>
                        </Row>
                    </div>
                </div>
            </Modal>
        )
    }
}